<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 志愿者列表</span>
        <!--         导出按钮-->

        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="志愿者列表"
                 @search-method="handleGetSearchActivity"
        />
        <el-table :data="xlsxSheet" border max-height="680" style="width: 100%">
          <el-table-column
              align="center"
              header-align="center"
              v-for="(item ,index) in settings"
              :prop="index"
              :label="item"
              v-if="index!=='volunteerAvatar'"
              :key="item"
          />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                  :src="scope.row.volunteerAvatar"
                  alt="头像"
                  class="commodity-img"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10,50,100,500,1000,99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"/>
        <el-dialog
            :title="content ? '志愿者详情:' + content.activity.activityName : ''"
            :visible.sync="Contentshow"
        >
          <el-card shadow="hover"></el-card>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import NavBtn from "@/components/navBtn";

export default {
  components: { NavBtn },
  data () {
    return {
      list: [],
      currentPage: 1,
      keyword: "",
      currentPageSize: 10,
      total: 0,
      content: "",
      Contentshow: false,
      settings: {
        "volunteerId": "志愿者ID",
        "volunteerName": "志愿者姓名",
        "volunteerIdentify": "身份证号",
        "volunteerAccount": "账户",
        "volunteerAddress": "地址",
        "volunteerSpecialty": "特长",
        "volunteerOccupation": "职业",
        "volunteerNo": "中国志愿者编号",
        "volunteerSex": "志愿者性别",
        "volunteerAge": "志愿者生日",
        "volunteerMobile": "志愿者手机号",
        "volunteerCredits": "志愿者积分",
        "volunteerAvatar": "头像",
        "enrollcount": "报名次数",
        "hours": "总活动时长",
        "leavecount": "请假次数",
        "recordcount": "签到次数",

      },
    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        console.log(`value-->`, value);
        return {
          "volunteerId": value?.volunteerId,
          "volunteerName": value?.volunteerName,
          "volunteerIdentify": value?.volunteerIdentify,
          "volunteerAccount": value?.volunteerAccount,
          "volunteerAddress": value?.volunteerAddress,
          "volunteerSpecialty": value?.volunteerSpecialty,
          "volunteerOccupation": value?.volunteerOccupation,
          "volunteerNo": value?.volunteerNo,
          "volunteerSex": value?.volunteerSex,
          "volunteerAge": value?.volunteerAge,
          "volunteerMobile": value?.volunteerMobile,
          "volunteerCredits": value.volunteerCredits,
          "volunteerAvatar": value?.volunteerAvatar,
          "enrollcount": value?.enrollcount,
          "hours": value?.hours,
          "leavecount": value?.leavecount,
          "recordcount": value?.recordcount,
        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  methods: {
    // 分页查询全部闲置

    async handleGetBySizeActivity (size) {
      let pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageSize = size;
      const res = await this.$http.volunteerGet({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    //获取志愿者信息
    async handleGetActivityInfo () {
      this.articleContentshow = true;
      // console.log(params)
      // let res = await this.$http.volunteerGet(params)
      if (res.code !== 0) return null;
      this.content = res.data;
      // console.log(this.content)
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      let pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageNum = num;
      console.log(pageNum, pageSize);
      const res = await this.$http.volunteerGet({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;

    },
    async handleGetVolunteer () {
      const res = await this.$http.volunteerGet({
        pageNum: this.currentPage,
        pageSize: this.Contentshow,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },

    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口

      const res = await this.$http.volunteerAllBySearch(
          {
            from: dataRange ? dataRange[0] ?? "" : "",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange ? dataRange[1] ?? "" : "",
          },
      );
      if (res.code !== 0) return null;
      this.total = res.data.total;
      this.list = res.data.list;

    },
  },

};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
